<template>
	<view class="titleTab" v-if="isShowTabs">
		<view :class="[tabNums === 0 ? ' acts' : '', 'tabItem']" @click="yearClick(0)" :style="{ borderRight: tabNums === 0 ? '2rpx solid #0091ff' : '' }">年审梯</view>
		<view :class="[tabNums === 1 ? ' acts' : '', 'tabItem']" @click="yearClick(1)" :style="[secondTab]">非年审梯</view>
		<view :class="[tabNums === 2 ? ' acts' : '', 'tabItem']" @click="yearClick(2)" :style="[thirdTab]">全部</view>
	</view>
</template>

<script>
export default {
	props: {
		tabNums: {
			type: [Number, String],
			default: 0
		},
		isShowTabs: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		secondTab() {
			if (this.tabNums == 0) {
				return {
					borderLeft: 'none'
				};
			}
			if (this.tabNums == 2) {
				return {
					borderRight: 'none'
				};
			}
		},
		thirdTab() {
			if (this.tabNums == 2) {
				return {
					borderLeft: '2rpx solid #0091ff'
				};
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		yearClick(idx) {
			this.$emit('change', idx);
		}
	}
};
</script>

<style lang="scss" scoped>
.titleTab {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	color: #666666;
	.tabItem {
		height: 56rpx;
		display: flex;
		padding: 0 16rpx;
		align-items: center;
		justify-content: center;
		border: 2rpx solid #d5d5d5;

		transition: 0.3s all;
	}
	.tabItem:first-child {
		margin-left: -2rpx;
		border-radius: 4rpx 0rpx 0rpx 4rpx;
		border-right: none;
	}
	.tabItem:nth-child(2) {
		// border-left: none;
		// border-right: none;
	}
	.tabItem:last-child {
		border-radius: 0rpx 4rpx 4rpx 0rpx;
		border-left: none;
	}

	.acts {
		border: 2rpx #0091ff solid;
		color: #0091ff;
		background: #dcf0ff;
		z-index: 2;
	}
}
</style>
